<template>
  <div class="content">
    <el-form
      ref="form"
      :model="form"
    >
      <div class="search">
        <el-form-item
          label="设备类型"
          class="label"
        >
       <el-select placeholder="请选择设备类型" class="input" v-model="form.type">
          <el-option v-for="item in typeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
       </el-select>
        </el-form-item>
        <el-form-item
          label="设备状态"
          class="label"
        >
          <el-select placeholder="请选择设备状态" class="input" v-model="form.status">
          <el-option v-for="item in statusoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
       </el-select>
        </el-form-item>
         <el-form-item>
          <el-button
            type="primary"
            size="mini"
            @click="onSubmit"
          >
            查询
          </el-button>

        </el-form-item>
         <el-form-item style="width:100%;">
           <div style="float:right;">


              <img src="../../assets/T通用按钮/按钮/导入.png" alt="">
              <img src="../../assets/T通用按钮/按钮/导出.png" alt="">
               <el-button type="warning" @click="handleCreate" icon="el-icon-circle-plus-outline" size="mini">
                添加
              </el-button>
           </div>

        </el-form-item>
      </div>
    </el-form>
    <el-table
      ref="singleTable"
      :data="tableData"
      :header-cell-style="{background: '#EBECF0',height:'44px',color:'#000000'}"
      :cell-style="{background: '#ffffff',height:'44px',color:'#000000'}"
      highlight-current-row
      style="width: 100%"
      @current-change="handleCurrentChange"
    >
      <el-table-column
        label="序号"
        type="index"
        width="100"
      />
        <el-table-column
        property="community"
        label="所属小区"
        width="200"
      />
      <el-table-column
        property="deviceId"
        label="设备ID"
      >
        </el-table-column>
      <el-table-column
        property="name"
        label="设备名称"
      />
      <el-table-column
        property="type"
        width="150"
        label="设备类型"
      />
      <el-table-column
        property="position"
        label="设备位置"
      />
      <el-table-column
        property="status"
        width="150"
        label="设备状态"
      >
     <template slot-scope="scope">
          <el-link :type="scope.row.status=='0'?'success':scope.row.status=='1'?'warning':'danger'" :underline="false">
            {{scope.row.status=='0'?'正常':scope.row.status=='1'?'检修':'故障'}}
          </el-link>
        </template>
      </el-table-column>
       <el-table-column
        property="creater"

        label="维保负责人"
      />
       <el-table-column
        property="phone"
        width="150"
        label="维保电话"
      />
      <el-table-column
        property="name"
        label="操作"
        width="100"
      >
        <template slot-scope="scope">
          <el-button type="text" @click="handleDetail"> 查看</el-button>
        </template>
      </el-table-column>

    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="page"
        background
        :page-sizes="[10, 20, 30, 40]"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 图片放大 -->
    <img-dialog
      v-if="isShownimg"
      :img="chooseImg"
      @closeImg="closeImg"
    />

    <!-- 新增 -->
    <el-dialog width="60%" title :visible.sync="createVisible">
      <div class="dialog_box">
        <div class="dialog_content">
          <div class="dialog_title">新增信息</div>

          <el-form ref="createform" :inline="true" :model="createform">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="小区" class="label">
                  <el-input v-model="createform.community" class="input" placeholder="请输入小区名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="设备类型" class="label">
                  <el-select placeholder="请选择设备类型" class="input" v-model="createform.type">
                      <el-option v-for="item in typeoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="设备ID" class="label">
                  <el-input v-model="createform.deviceId" placeholder="请输入设备ID"  class="input"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="设备名称" class="label">
                  <el-input v-model="createform.name" placeholder="请输入设备名称" class="input"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom:20px;">
              <el-col :span="24">
                <div class="label" style="font-size: 14px;color: #606266;font-weight:500;margin-bottom:10px;">
                  问题详情
                </div>
              <el-input v-model="createform.position" placeholder="请输入位置"  class="input" style="width:100%;"></el-input>
              </el-col>
            </el-row>
              <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="维保负责人" class="label">
                  <el-input v-model="createform.creater" placeholder="请输入维保负责人"  class="input"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="维保电话" class="label">
                  <el-input v-model="createform.phone" placeholder="请输入维保电话" class="input"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
       <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="createVisible = false">保存</el-button>
          </span>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog width="60%" title :visible.sync="detailVisible">
      <div class="dialog_box">
        <div class="dialog_content">
          <div class="dialog_title">设备信息</div>

          <el-form ref="detailform" :inline="true" :model="detailform">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="小区" class="label">
                  <el-input v-model="detailform.community" class="input" placeholder="请输入小区名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="设备类型" class="label">
                  <el-select placeholder="请选择设备类型" class="input" v-model="detailform.type">
                      <el-option v-for="item in typeoptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="设备ID" class="label">
                  <el-input v-model="detailform.deviceId" placeholder="请输入设备ID"  class="input"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="设备名称" class="label">
                  <el-input v-model="detailform.name" placeholder="请输入设备名称" class="input"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-bottom:20px;">
              <el-col :span="24">
                <div class="label" style="font-size: 14px;color: #606266;font-weight:500;margin-bottom:10px;">
                  问题详情
                </div>
              <el-input v-model="detailform.position" placeholder="请输入位置"  class="input" style="width:100%;"></el-input>
              </el-col>
            </el-row>
              <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="维保负责人" class="label">
                  <el-input v-model="detailform.creater" placeholder="请输入维保负责人"  class="input"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="4">
                <el-form-item label="维保电话" class="label">
                  <el-input v-model="detailform.phone" placeholder="请输入维保电话" class="input"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
       <span slot="footer" class="dialog-footer">
         <div v-if="!isEdit">
            <el-button type="primary" @click="isEdit = true">编辑</el-button>
            <el-button type="primary" @click="detailVisible = false">删除</el-button>
         </div>
          <div v-if="isEdit">
            <el-button type="primary" @click="detailVisible = false">保存</el-button>
         </div>

          </span>
    </el-dialog>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import ImgDialog from '@/components/Imgdialog'

export default {
  name: 'Dashboard',
   components:{
    ImgDialog
  },
  data() {
    return {
      form:{

      },
      tableData:[
        {name:'人脸摄像头',type:'摄像头',status:'0',community:'新丰苑三期',deviceId:'12334234',phone:'13289883261',creater:'刘昂',position:'19号楼'},
         {name:'人脸摄像头',type:'摄像头',status:'1',community:'新丰苑三期',deviceId:'12334234',phone:'13289883261',creater:'刘昂',position:'19号楼'},
       {name:'人脸摄像头',type:'摄像头',status:'2',community:'新丰苑三期',deviceId:'12334234',phone:'13289883261',creater:'刘昂',position:'19号楼'}

      ],
      total:100,
      page:10,
      isShownimg:false,
      chooseImg:null,
      typeoptions:[
        {label:'全部',value:''},
        {label:'类型一',value:'0'},
        {label:'类型二',value:'1'},
        {label:'类型三',value:'2'},
      ],
      statusoptions:[
        {label:'全部',value:''},
        {label:'正常',value:'0'},
        {label:'检修',value:'1'},
        {label:'故障',value:'2'},
      ],
      createVisible:false,
      createform:{},
      detailVisible:false,
      detailform:
      {name:'人脸摄像头',type:'摄像头',status:'0',community:'新丰苑三期',deviceId:'12334234',phone:'13289883261',creater:'刘昂',position:'19号楼'},
      isEdit:false,
    }
  },
  computed: {
    ...mapGetters([
      'communityId'
    ])
  },
  watch: {
    communityId(newVal,oldVal){
      console.log('changed')
    }
  },
  created() {

  },
  methods: {
    showImg(img){
      this.isShownimg=true
      this.chooseImg=img
    },
    closeImg(){
      this.isShownimg=false
    },
    handleCreate(){
      this.createVisible=true
    },
    handleDetail(){
      this.detailVisible=true;
      this.isEdit=false;
    }
  },
}
</script>
<style lang="scss" scoped>
.content{
  background: #ffffff;
  padding:25px;
  padding-bottom: 100px;
  min-height: 800px;
  position: relative;
  .search{
    display: flex;
    align-items: flex-end;
    border-bottom: 2px solid #DCDEE3;
    margin-bottom: 30px;
    img {
      vertical-align: middle;
    }
  }
  .input{
    width: 346px;
  }
  .label{
    margin-right: 20px;
    color: #666666;
    font-size: 14px;
  }
  .pagination{
    position: absolute;
    right: 0;
    bottom: 0;
    margin: 50px;
  }
  .img{
    width: 50px;
    height: 34px;
  }
}
</style>
<style>
.input .el-input__inner{
   height: 28px !important;
}
@media screen and (max-width: 1500px) {
      .input {
        width: 246px  !important;
      }
  }
   @media screen and (min-width:1500px) and (max-width: 1800px) {
      .input{
        width: 320px !important;
      }
  }
</style>
